<template>
  <van-nav-bar
    title="新增地址"
    right-text="保存"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />

  <!-- 可以使用 CellGroup 作为容器 -->
  <van-cell-group inset>
    <van-field v-model="people" label="收货人" placeholder="请填写收货人" />
    <van-field v-model="phone" label="手机号码" placeholder="请填手机号码" />
  </van-cell-group>
  <van-field
    v-model="fieldValue"
    is-link
    readonly
    label="地区"
    placeholder="请选择所在地区"
    @click="show = true"
  />
  <van-popup v-model:show="show" round position="bottom">
    <van-cascader
      v-model="cascaderValue"
      title="请选择所在地区"
      :options="options"
      @close="show = false"
      @finish="onFinish"
    />
  </van-popup>
  <div>详细地址</div>
  <van-cell-group inset>
    <van-field
      v-model="message"
      rows="2"
      autosize
      label=""
      type="textarea"
      maxlength="50"
      placeholder="请填写详细地址"
      show-word-limit
    />
  </van-cell-group>
  <button @click="ok">000</button>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { showToast } from "vant";
import { getList, addUpdate, deletes } from "@/api/user.js";
import { useCascaderAreaData } from "@vant/area-data";

import { useRouter } from "vue-router";

const router = useRouter();
const onClickLeft = () => history.back();
const onClickRight = () => append();
const people = ref("");
const phone = ref("");
const message = ref("");

const getDate = reactive({
  addres: [],
});
const show = ref(false);
const fieldValue = ref("");
const cascaderValue = ref("");
const options = useCascaderAreaData();
const onFinish = ({ selectedOptions }) => {
  show.value = false;
  // .join("/")拼接在一起
  fieldValue.value = selectedOptions.map((option) => option.text);
  getDate.addres = fieldValue.value;
};
function ok() {
  console.log(getDate.addres[2]);
  console.log(people.value);
}
function append() {
  addUpdate({
    name: people.value,
    mobile: phone.value,
    position: {
      province: {
        code: "110000",
        name: getDate.addres[0],
      },
      city: {
        code: "110100",
        name: getDate.addres[1],
      },
      area: {
        code: "110101",
        name: getDate.addres[2],
      },
      address: message.value,
    },
    is_default: true,
  }).then((res) => {
    if (res.code == 0) {
      showToast({
        message: res.msg,
        icon: "success",
      });
      const tiem = setInterval(() => {
        router.push({
          path: "/my/manage",
        });
        clearInterval(tiem);
      }, 1000);
    }
    console.log(res);
  });
}
function info() {
  getList().then((res) => {
    console.log(res);
  });
}
onMounted(() => {
  info();
});
</script>
